<template>
	<layout-visitor class="layout-base">
		<ul class="left-nav" slot="nav">
			<li v-for="(v,i) in nav" :key="i" :data-active="i===currentNav" @click.stop="onNavChange(i)">
				<span>{{v.name}}</span>
			</li>
		</ul>
		<div v-if="currentNav === 0">
			<h1>{{nav[currentNav].name}}</h1>
			<z-table>
				<thead>
					<tr>
						<th>返回码</th>
						<th>返回信息</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(tr,i) in globalCode" :key="i">
						<td>{{tr.code}}</td>
						<td>{{tr.msg}}</td>
						<td>{{tr.description}}</td>
					</tr>
				</tbody>
			</z-table>
		</div>
		<div v-else>
			<h1>{{nav[currentNav].name}}</h1>
			<ul class="api-list">
				<li v-for="(api,i) in apiList" :key="i">
					<div class="api-wrap" @click.stop="apiExtend(i)">
						<div class="left">
							<label :class="['method', 'tag', 'bg-'+mapMethodStyle[api.method]]">{{api.method}}</label>
							<label v-if="api.status" class="tag">{{mapAPIStatus[api.status]}}</label>
							<div class="url" :data-status="api.status">
								{{api.url}}
								<button @click.stop="copyHandle($event, api.url)">复制</button>
								<button>{{i===currentAPI?'缩起':'展开'}}</button>
							</div>
						</div>
						<div class="right">
							{{api.description}}
						</div>
					</div>
					<div class="dropdown" :ref="'apiDropdown'+i" :data-active="i===currentAPI" :style="{height:i===currentAPI?currentAPIHeight:0}">
						<div class="wrap">
							<h4>请求参数：</h4>
							<z-table v-if="api.reqData.length">
								<thead>
									<tr>
										<th>参数</th>
										<th>值</th>
										<th>说明</th>
										<th>参数位置</th>
										<th>数据类型</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(tr,trI) in api.reqData" :key="trI">
										<td>{{tr.label}}</td>
										<td>{{tr.required==1?'必填':'选填'}}</td>
										<td>{{tr.description}}</td>
										<td>{{tr.position}}</td>
										<td>{{tr.dataType}}</td>
									</tr>
								</tbody>
							</z-table>
							<div v-else class="gray">无</div>
							<h4>响应格式：</h4>
							<p>{{api.resType}}</p>
							<h4>响应信息：</h4>
							<pre v-if="api.resData" v-highlightjs="api.resData"><code class="javascript"></code></pre>
							<div v-else class="gray">无</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<loading v-model="showLoading"></loading>
	</layout-visitor>
</template>

<script>
	import layoutVisitor from './layout/visitor'
	export default{
		components: {'layout-visitor':layoutVisitor},
		async mounted() {
			this.query = this.$router.history.current.query
			//移除当前展开的API
			this.currentAPI = -1
			this.getGlobalCode()
			await this.getCatalogList()
			if(this.query.nav){
				this.currentNav = parseInt(this.query.nav)
				this.getAPIList()
			}
		},
		data(){
			return{
				//加载
				showLoading: false,
				//路径参数
				query: null,
				//导航
				currentNav:0,
				//当前展开的API与高度
				currentAPIHeight: 0,
				currentAPI:-1,
				//API模拟数据
				nav:[{name:'全局返回码', _id:0}],
				globalCode:[],
				apiList:[],
				mapAPIStatus:{
					'abolish':'废除',
					'developing':'开发中'
				},
				mapMethodStyle:{
					'POST':'primary',
					'PUT':'info',
					'GET':'success',
					'DELETE':'danger'
				}
			}
		},
		methods:{
			//获取目录列表
			async getCatalogList(){
				await this.$http.get(`/api/catalogList?projectId=${this.query.projectId}`)
				.then(res=>{
					this.nav = [{name:'全局返回码', _id:0}, ...res]
				})
				.catch(err=>{
					console.log('获取目录列表失败：', err)
				})
			},
			//获取全局码
			async getGlobalCode(){
				this.showLoading = true
				await this.$http.get(`/api/globalCodeList?projectId=${this.query.projectId}`)
				.then(res=>{
					this.globalCode = res
				})
				.catch(err=>{
					console.log('获取全局返回码失败：', err)
				})
				this.showLoading = false
			},
			//切换目录
			async onNavChange(i){
				this.currentNav = i
				this.$router.push({
					path: '/project',
					query: {nav: i, projectId: this.query.projectId}
				})
				if(i===0)return false
				this.getAPIList()
			},
			//获取API接口列表
			async getAPIList(){
				this.showLoading = true
				this.currentAPI = -1
				await this.$http.get(`/api/apiList?navId=${this.nav[this.currentNav]._id}`)
				.then(res=>{
					this.apiList = res
				})
				.catch(err=>{
					console.log('获取API列表失败：', err)
				})
				this.showLoading = false
			},
			//复制api
			copyHandle(e, url){
				this.$copyText(url, e.target).then(()=>{
					this.$Message({
						type:'success',
						content:'复制成功'
					})
				}).catch(e=>{
					console.log(e)
					this.$Message({
						type:'error',
						content:'复制失败'
					})
				})
			},
			//展开或收缩API
			apiExtend(i){
				if(this.currentAPI === i) {
					this.currentAPI = -1
					return false
				}
				const ele = this.$refs['apiDropdown'+i][0]
				this.currentAPIHeight = ele.scrollHeight + 'px'
				this.currentAPI = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../assets/css/base.scss';
	.left-nav{
		padding: 10px 0;
		li{
			padding: 10px 20px;
			cursor: pointer;
			color: #666;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:hover{
				color: #000;
			}
			&[data-active="true"] span{
				color: $primary;
			}
		}
	}
	.api-list{
		li{
			margin-bottom: 10px;
		}
		.api-wrap{
			border: solid 1px #eee;
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding-right: 1em;
			align-items: center;
			cursor: pointer;
			box-sizing: border-box;
			.right{
				display: flex;
				align-items: center;
			}
			.left{
				display: flex;
				align-items: center;
			}
		}
		.tag{
			font-size: 12px;
			padding: 0 5px;
			background: #e5e5e5;
			display: inline-block;
			height: 36px;
			line-height: 38px;
			min-width: 56px;
			text-align: center;
			margin: -1px;
		}
		.url{
			margin: 0 0 0 15px;
			&[data-status="abolish"]{
				text-decoration: line-through;
			}
			button{
				font-size: 12px;
				background: none;
				margin-left: 5px;
				border: solid 1px #eee;
				color: #999;
				border-radius: 3px;
				cursor: pointer;
				&:hover{
					background: #f5f5f5;
				}
			}
		}
		.dropdown{
			height: 0;
			overflow: hidden;
			transition: height .3s;
			border: solid 1px #eee;
			border-top: 0;
			border-bottom: 0;
			.wrap{
				padding: 1em;
			}
			&[data-active="true"]{
				border-bottom: solid 1px #eee;
				height: auto;
			}
			h4{
				font-weight: bold;
			}
		}
	}
</style>
